<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link href="../../../lib/font-Awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../../lib/font-Awesome/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <link rel="stylesheet" href="../../../lib/jedate/skin/jedate-blue.css">
    <link rel="stylesheet" href="public.css">
    <title>全日考勤时间设置</title>
    <style>
        .radio.radio-inline {margin-top: 0;}
        .radio label::before{cursor:pointer;}
        input[type=radio]{cursor:pointer;}
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{vertical-align:middle;}
    </style>
</head>
<body>

<div class="container-fluid">
    <table id="table-day" class="table table-hover text-center mt-10">
        <thead class="text-c">
        <th>名称</th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th>启用</th>
        <th>操作</th>
        </thead>
        <tbody>
        <tr>
            <td colspan="5" class="f-18">数据获取中...</td>
        </tr>
        </tbody>
    </table>
</div>

<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->

<!--<script src="../../../js/bootstrap.min.js" type="text/javascript"></script>-->
<!--<script src="../../../lib/jquery-switch/ios6switch.min.js"></script>-->
<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../lib/jedate/dist/jedate.min.js"></script>
<!--<script src="../../../lib/bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>-->
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>

<script>
    var T = new Extend_base();
    jQuery(document).ready(function () {
        function Day() {
            this.getDay();
            this.clickEvent();
        }

        Day.prototype = {
            clickEvent: function () {
                var _this = this;
                $("#table-day").on("click", ".btn-edit", function () {
                    if ($(this).text() == "编辑") {
                        $(this).text("保存");
                        var input = $(this).parents("tbody").find("input");
                        input.removeAttr("disabled readonly").removeClass('gray-bg');
                    } else {
                        _this.submitEvent();
                    }
                });
            },
            getDay: function () {
                var _this = this;
                T.ajaxSecret(url_join("full-time/show"), "post", {}, function (res) {
                    _this.renderDay(res.data);
                });
            },
            renderDay: function (data) {
                var _this = this, id = "date", num = 1;
                var tableDay = $("#table-day").find("tbody");
                tableDay.html("");
                $.each(data, function (i, v) {
                    var checked = Number(v.use) ? "checked=checked" : ""; // is select
                    var tr = $('<tr data-school_id="' + v.school_id + '"   data-id="' + v.id + '">' +
                        '<td>' + v.name + '</td>' +
                        '<td><input type="text" id="' + (id + num) + '" disabled class="form-control input-sm gray-bg" readonly name="start_at" value="' + v.start_at + '"></td>' +
                        '<td><input type="text" id="' + id + (num + 1) + '" disabled class="form-control input-sm gray-bg" readonly name="end_at"  value="' + v.end_at + '"></td>' +
                        '<td>' +
                        '<div class="radio radio-primary">' +
                        '<input type="radio" disabled id="day' + i + '" value="' + v.id + '" name="radioInline" ' + checked + '>' +
                        '<label for="day' + i + '"></label>' +
                        '</div>' +
                        '</div>' +
                        '</td>' +
                        '</tr>');

                    if (i == 0) {
                        var td = $('<td style="border-left:1px solid #ccc;border-top:none;position:relative"><span style="position:absolute;left:31px;top:40px;" class="btn-edit btn btn-primary btn-sm">编辑</span></td>');
                        tr.append(td);
                    } else {
                        var dd = $('<td style="border-left:1px solid #ccc;border-top:none;"> </td>');
                        tr.append(dd);
                    }

                    tableDay.append(tr);
                    num += 2;
                });
                _this.initDate(data.length); // init date
            },
            submitEvent: function () {
                var _this = this, arr = [];
                var tr = $("#table-day tbody tr");
                tr.each(function (i, v) {
                    var checkbox = $(v).find("input[type=radio]");
                    var use = checkbox[0].checked ? 1 : 0;
                    var obj = {
                        id: checkbox.val(),
                        start_at: $(v).find("input[name=start_at]").val(),
                        end_at: $(v).find("input[name=end_at]").val(),
                        use: use
                    };
                    arr.push(obj);
                });
                T.ajaxSecret(url_join("full-time/update"), "post", {ft: arr}, function (res) {
                    var ty = $('#table-day');
                    ty.find("input").attr("disabled",'disabled').attr('readonly','readonly');
                    ty.find("input[type=text]").addClass('gray-bg');
                    ty.find('.btn-edit').text('编辑');
                    layer.msg("操作成功", {icon: 1});
                });
            },
            initDate: function (num) {
                var _this = this, num = num * 2 + 1;
                for (var i = 1; i < num; i++) {
                    jeDate("#date" + i, {
                        minDate: '2018-07-12 00:00',
                        maxDate: '2550-06-16 23:59',
                        format: "hh:mm",
                        isClear: false,
                    });
                }
            },
            constructor: "Day",
        };
        new Day();
    });
</script>
</body>
</html>